import { ResultPage } from 'antd-mobile'
import { SearchBar } from 'antd-mobile'
import { NoticeBar } from 'antd-mobile'
import img from '../../img/预约挂号.png'
import img1 from '../../img/复诊开方.png'
import img2 from '../../img/极速问诊.png'
import img3 from '../../img/问专家.png'
import img4 from '../../img/开药门诊.png'
import img5 from '../../img/直播.png'
import img6 from '../../img/科普.png'
import img7 from '../../img/买药.png'
import { Tabs } from 'antd';
import Doctor from '../../conpoment/doctor'
import style from './index.module.css'
function Index() {

    const data = [
        {
            title: '预约挂号',
            img: img,
            text: '30W+专家入驻'
        },
        {
            title: '极速问诊',
            img: img2,
            text: '平均3分钟接诊'
        },
        {
            title: '复诊开方',
            img: img1,
            text: '慢病续方送到家'
        }
    ]
    const data1 = [
        {
            title: '问专家',
            imgs: img3,
        },
        {
            title: '开药门诊',
            imgs: img4,
        },
        {
            title: '义诊直播',
            imgs: img5,
        },
        {
            title: '健康科普',
            imgs: img6,
        },
        {
            title: '商城买药',
            imgs: img7,
        },

    ]
    const onChange = (key: string) => {
        console.log(key);
    };
    // 定义科室数据 - 根据后端API的科室标识符
    const departments = [
        { key: '1', label: '妇产科', department: '妇产科' },
        { key: '2', label: '儿科', department: '儿科' },
        { key: '3', label: '皮肤科', department: '皮肤科' },
        { key: '4', label: '心血管内科', department: '心血管内科' },
        { key: '5', label: '呼吸内科', department: '呼吸内科' },
        { key: '6', label: '消化内科', department: '消化内科' },
        { key: '7', label: '中医科', department: '中医科' },
        { key: '8', label: '口腔科', department: '口腔科' },
    ];
    // 动态生成tabs items
    const items = departments.map(dept => ({
        key: dept.key,
        label: dept.label,
        children: <Doctor department={dept.department} />
    }));
    console.log(items);

    return (
        <div>
            <ResultPage
                status=''
                title=''
                description={
                    <div className={style.pageTitle}>
                        妙手医生<span className={style.brandName}>·妙手互联网医院</span>
                    </div>
                } >
                <ResultPage.Card className={style.searchCard}>
                    <SearchBar placeholder='搜索医生、医院、药品、疾病症状' />
                </ResultPage.Card>
                <div className={style.noticeContainer}>
                    <NoticeBar content='适用于当前页面内信息的通知，是一种较醒目的页面内通知方式' color='alert' />
                </div>
                <div>
                    <div className={style.serviceCardsContainer}>
                        {
                            data.map((item, index) => {
                                return <div key={index} className={style.serviceCard}>
                                    <img src={item.img} alt="" className={style.serviceIcon} /><br />
                                    <b className={style.serviceTitle}>{item.title}</b>
                                    <p className={style.serviceDescription}>{item.text}</p>
                                </div>
                            })
                        }
                    </div>
                    <div className={style.pp}>
                        {
                            data1.map((item, index) => {
                                return <div key={index} className={style.serviceCard}>
                                    <img src={item.imgs} alt="" className={style.img} /><br />
                                    <b className={style.serviceTitle}>{item.title}</b>

                                </div>
                            })
                        }
                    </div>
                </div>

                <div className={style.expertSection}>
                    <h4 className={style.expertTitle}>我要问专家
                        <span className={style.moreLink}>更多＞</span></h4>
                </div>
                <div className={style.tabsContainer}>
                    <Tabs defaultActiveKey="1" items={items} onChange={onChange} type='card' />
                </div>
            </ResultPage>
        </div>
    )
}
export default Index
